<template>
	<div class="withdrawal_record">
		<header>
			<div>提现总额（元）</div>
			<span>{{ state.total_amount }}</span>
		</header>

		<main>
			<div class="title">提现记录</div>
			<van-list
          class="list"
          v-model:loading="state.loading"
          :finished="state.finished"
          finished-text="没有更多了"
          @load="getMyWithdrawRecords">
				<div class="list_item" v-for="item of state.withdrawRecords">
					<div class="left">
						<span>提现</span>
						<div>{{ item.add_time }}</div>
					</div>
					<div class="right">-{{item.amount}}</div>
				</div>
			</van-list>
		</main>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { myWithdrawRecords } from '@/api/my';
import { useMainStore } from '@/store/index';

const mainStore = useMainStore();
const state = reactive<any>({
  pageInfo: {
    pageIndex: 1,
    pageSize: 10,
    user_id: mainStore.user_id
  },
	loading: false,
	finished: false,
	withdrawRecords: [],
  total_amount:''
});

const getMyWithdrawRecords = async () => {
  if (mainStore.storeIsLogin) {
    state.pageInfo.user_id = mainStore.storeInfo.member.user_id
  } else {
    state.pageInfo.user_id = mainStore.user_id
  }
	const res = await myWithdrawRecords(state.pageInfo);
  let { result, total_amount } = res.data;
  state.total_amount = total_amount;
  if (result.dataList.length) {
    state.pageInfo.pageIndex++;
    state.withdrawRecords = [...state.withdrawRecords, ...result.dataList];
    state.loading = false;
  } else {
    state.finished = true;
  }
	console.log(res);
};
</script>

<style lang="scss" scoped>
.withdrawal_record {
	header {
		@include flx-direction-between;
		height: 170px;
		box-sizing: border-box;
		padding: 47px 15px 70px 15px;
		color: #ffffff;
		background: linear-gradient(111deg, #f53d7d, #fb56b3);
		div {
			font-size: 15px;
		}
		span {
			font-size: 42px;
		}
	}
	main {
		margin: -35px 15px 15px 15px;
		box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		background: white;
		.title {
			height: 55px;
			padding: 0 20px;
			line-height: 55px;
			border-bottom: 1px solid #efefef;
			font-size: 15px;
			font-weight: bold;
		}
		.list {
			.list_item {
				@include flx-justify-between;
				padding: 15px 20px;
				border-bottom: 1px solid #efefef;
				&:last-child {
					border-radius: 10px;
					background: wheat;
				}
				.left {
					color: #222222;
					font-size: 14px;
					div {
						margin-top: 5px;
						color: #888888;
						font-size: 13px;
					}
				}
				.right {
				}
			}
		}
	}
}
</style>
